<template>
	<div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/theme/macarons'  // echarts theme

export default {
	props: {
		className: {
			type: String,
			default: 'chart'
		},
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '350px'
		},
		chartData: {
			type: Object
		}				
	},
	data(){
		return {
			chartInst: null
		}
	},
	mounted(){
		this.init();
	},
	methods: {
		init(){
			this.chartInst = echarts.init(this.$el);
			this.setOptions(this.chartData)
		},
		setOptions({ date, pvData, uvData } = {}) {
			this.chartInst.setOption({
				xAxis: {
				data: date,
				boundaryGap: false,
				axisTick: {
					show: false
				}
				},
				grid: {
				left: 10,
				right: 10,
				bottom: 20,
				top: 30,
				containLabel: true
				},
				tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross'
				},
				padding: [5, 10]
				},
				yAxis: {
				axisTick: {
					show: false
				}
				},
				legend: {
				data: ['访问量(PV)', '独立用户(UV)']
				},
				series: [
					{
						name: '访问量(PV)', itemStyle: {
							normal: {
							color: '#FF005A',
							lineStyle: {
								color: '#FF005A',
								width: 2
							}
							}
						},
						smooth: true,
						type: 'line',
						data: pvData
					},
					{
						name: '独立用户(UV)',
						smooth: true,
						type: 'line',
						itemStyle: {
							normal: {
							color: '#3888fa',
							lineStyle: {
								color: '#3888fa',
								width: 2
							},
							areaStyle: {
								color: '#f3f8ff'
							}
							}
						},
						data: uvData
					}
				]
			})
		}
	}
}
</script>